<template>
  <div id="box" class="box">
    <div @click="showFn" class="green">
      <transition name="red">
        <div v-show="show" class="red">给我加一个动画</div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        show:true
    };
  },
  created() {
   
  },
  methods: {
      showFn(){
          this.show=!this.show
      }
  }
};
</script>

<style >
.red {
  width: 100%;
  height: 100%;
  background-color: red;
  /*下面的样式可以不写，这里为了方便理解*/
  opacity: 1;
  margin-left: 0;
}
.red-enter {
  opacity: 0;
  margin-left: 100%;
}
.red-enter-active,
.red-leave-active {
  transition: all 1s;
}
.red-leave {
  /*对于简单动画来说，[name]-leave也可以不写，多数情况下，此处的样式和元素正常显示是的样式是相同的*/
  opacity: 1;
  margin-left: 0;
}
.red-leave-active {
  opacity: 0;
  margin-left: 100%;
}
</style>